<template>
    <div class="operation-page">
        <span class="article-title">运营配置</span>
        <div class="fliter">
            <span style="font-size: 14px;">标签类型：</span>
            <el-select v-model="tagIdList" style="width: 560px;" placeholder="请选择标签类型" multiple collapse-tags
                collapse-tags-tooltip :max-collapse-tags="4">
                <el-option v-for="item in tagList" :key="item.id" :label="item.tagNameEn" :value="item.id" />
            </el-select>
            <el-button type="primary" :icon="Search" @click="handleSearch" style="margin:0 10px;">查询</el-button>
            <el-dropdown placement="bottom-start" trigger="click">
                <el-button type="primary" :icon="Plus">新增标签</el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <div
                            style="display: flex;justify-content: flex-start;gap: 5px;padding:0 5px;width:650px ;flex-wrap: wrap;">
                            <el-tag v-for="(item, index) in tagList" :key="index" closable :disable-transitions="false"
                                @close="handleDeleteTag(index)">
                                {{ item.tagNameEn }}
                            </el-tag>
                            <el-input v-if="inputVisible" ref="InputRef" v-model="tagName" class="w-20" size="small"
                                @keyup.enter="handleAddTag" @blur="handleAddTag" />
                            <el-button v-else class="button-new-tag" size="small" @click="showInput">
                                + New Tag
                            </el-button>
                        </div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

        </div>
        <div class="article-table">
            <el-table :data="tableData" v-loading="loading"
                :header-cell-style="{ background: '#fafafa', height: '56px', }"
                style="width: 100%;margin-top: 20px;margin-bottom: 20px; height: calc(100% - 70px);">
                <template v-for="(item, index) in tableHeader" :key="index">
                    <el-table-column :prop="item.prop" :label="item.label" :min-width="item.width" :fixed="index === 0">
                        <template #default="scope">
                            <div v-if="item.prop === 'image' && scope.row[item.prop]"
                                style="width: 120px; height: 100%;">
                                <el-image style="width: 100%; height: 100%" :src="scope.row[item.prop]" :zoom-rate="1.2"
                                    preview-teleported :preview-src-list="[scope.row[item.prop]]" :max-scale="7"
                                    :min-scale="0.2" fit="cover" />
                            </div>
                            <span v-else-if="item.prop === 'status'">{{ StatusMap[scope.row[item.prop]] }}</span>
                            <span v-else-if="item.prop === 'siteId'">
                                <a target="_blank" v-if="scope.row?.['siteId'] !== 4"
                                    style="text-decoration: none;color: #1677ff;" :href="'https://' + siteOptions?.filter((item) => item.id ==
                                        scope.row?.['siteId'])[0]?.siteUrl
                                        ">{{siteOptions?.filter((item) => item.id ==
                                            scope.row?.['siteId'])[0]?.siteName}}</a>
                                <div v-else style="display: flex;flex-direction: column;">
                                    <span v-for="(item, index) in siteOptions?.filter((item) => item.id !==
                                        scope.row?.['siteId'])"> <a target="_blank"
                                            style="text-decoration: none;color: #1677ff;" :href="'https://' + item?.siteUrl
                                                ">{{ item?.siteName }}</a></span>
                                </div>

                            </span>
                            <span v-else>{{ scope.row[item.prop] }}</span>
                        </template>

                    </el-table-column>
                </template>
                <!-- <el-table-column label="操作" width="150" fixed="right">
                    <template #default="scope">
                        <div style="display: flex;align-items: center;gap: 15px;">
                            <span style="cursor: pointer;color: #1677ff;"
                                @click="handleCheck('check', scope.row.id)">查看</span>
                            <span style="cursor: pointer;color: #1677ff;"
                                @click="handleCheck('edit', scope.row.id)">编辑</span>
                            <span style="cursor: pointer;color: red;" @click="handleDelete(scope.row.id)">删除</span>
                        </div>
                    </template>
                </el-table-column> -->
            </el-table>
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize"
                style="display: flex;justify-content: end;" layout="total,prev, pager, next,sizes" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

    </div>
</template>

<script setup lang="ts">
import { defineComponent, nextTick, onActivated, ref } from 'vue';
import service from '../config';
import { Search, Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
defineComponent({ name: 'Operation' })
const tagIdList = ref([])
const tableData = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref()
const loading = ref(false)
const tableHeader = ref([
    { label: '文章ID', prop: 'id', width: 200 },
    { label: '标题', prop: 'title', width: 200 },
    { label: '封面图', prop: 'image', width: 200 },
    { label: '状态', prop: 'status', width: 200 },
    { label: '分类', prop: 'articleCategory', width: 200 },
    { label: '所属网站', prop: 'siteId', width: 200 },
    { label: '上线时间', prop: 'publishDate', width: 200 },
    { label: '修改时间', prop: 'modified', width: 200 }])

enum StatusMap {
    通过 = 1,
    驳回,
    审核中,
    已归档,
    新版本审核中,
    新版本驳回
}

const tagName = ref('')
const tagList = ref([])
const siteOptions = ref([])
const inputVisible = ref(false)
const InputRef = ref()

const getSite = () => {
    service.get('/site/getAll')
        .then(response => {
            siteOptions.value = response?.data
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
}

const handleDeleteTag = (index: number) => {
    service.post('/tag/delete', { id: tagList.value[index]['id'] })
        .then(response => {
            ElMessage.success('删除成功！')
            tagList.value.splice(index, 1)
            getTagAll()
        })
        .catch(error => {
            ElMessage.error(error || error?.message)
        });
}

const showInput = () => {
    inputVisible.value = true
    nextTick(() => {
        InputRef.value!.input!.focus()
    })
}

const handleAddTag = () => {
    if (tagName.value) {
        service.post('/tag/add', { tagNameEn: tagName.value, tagName: tagName.value })
            .then(response => {
                ElMessage.success('添加成功！')
                tagList.value.push({ tagNameEn: tagName.value })
                inputVisible.value = false
                tagName.value = ''
                getTagAll()
            })
            .catch(error => {
                ElMessage.error(error || error?.message)
            });
    }

}
const handleSearch = () => {
    loading.value = true
    service.post('/article/page', { tagIdList: tagIdList.value, pageNum: pageNum.value, pageSize: pageSize.value })
        .then(response => {
            loading.value = false
            tableData.value = response.data?.records
            total.value = response?.data?.total
        })
        .catch(error => {
            loading.value = false
            console.error('Error fetching data:', error);
        });
}


const handleSizeChange = () => {
    pageNum.value = 1
    handleSearch()
}

const handleCurrentChange = () => {
    handleSearch()
}

const getTagAll = () => {
    service.get('/tag/getAll')
        .then(response => {
            tagList.value = response.data
            tagIdList.value = [4]
            handleSearch()
        })
        .catch(error => {
            ElMessage.error(error)
        });
}

onActivated(() => {
    getSite()
    getTagAll()
})
</script>

<style lang="scss">
.operation-page {
    background-color: #fff;
    padding: 30px;
    height: calc(100% - 10px);
    width: 100%;
    box-sizing: border-box;

    .article-title {
        font-size: 20px;
        font-weight: 600;
    }

    .fliter {
        display: flex;
        align-items: center;
        margin: 30px 0;
    }

    .el-button--primary {
        background-color: #1677ff;
    }

    .article-table {
        margin-top: 50px;

    }

    .el-drawer {
        width: 100% !important;
    }

    .el-drawer__body {
        padding: 0;
    }

    .el-table__row {
        font-size: 13px;
    }

    .el-dropdown-menu {
        padding: 5px !important;
    }

}
</style>
